<template>
  <!--店铺数据汇总-->
  <el-row style="height:100%">
    <page>
      <pageheader :isShow="false">
        店铺数据汇总
      </pageheader>
      <div class="page-content">
        <el-card class="box-card tag-card">
          <el-row>
              <Cascader :value.sync="company_id_arr"
                        :options.sync="companyOptions"
                        :changeEvent="'companyChange'"
                        :width="'303px'"
                        :isClearable="false">选择企业：</Cascader>
              <span style="margin-left: 28px;font-size:14px;">选择店铺：</span>
              <el-select v-model="case_id" filterable placeholder="选择店铺"
                         @change="changeCaseInfo"  @clear="CaseClear"
                         size="small"  clearable style="width:400px">
                <el-option
                  v-for="item in caseInfoOptions"
                  :key="item.id"
                  :label="item.case_name"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-row>
          <el-row>
               <span style="font-size:14px">选择时间：</span>
            <div class="datecheck">           
              <el-date-picker
              v-model="datetimeval"
              clearable
              type="datetimerange"
              :unlink-panels="true"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeDate"
              @blur="changeDate(datetimeval)"
              class="dataSum"
              >
              </el-date-picker>
            </div>
          </el-row>
          <el-row>
            <span style="font-size:14px">数据汇总：</span>
            <el-button type="primary"  v-if="buttonPermissions.isFlowData" icon="el-icon-refresh" :disabled="datetimeval[0]&&datetimeval[1]?false:true" size="small" @click="dataSum('hour')" >客流时粒度数据汇总</el-button>
            <el-button type="primary"  v-if="buttonPermissions.isFlowData" icon="el-icon-refresh" :disabled="datetimeval[0]&&datetimeval[1]?false:true" size="small" @click="dataSum('day')" style="margin-left:40px;">客流天粒度数据汇总</el-button>
            <el-button type="success" v-if="buttonPermissions.isSaleData" icon="el-icon-coin" :disabled="datetimeval[0]&&datetimeval[1]?false:true" size="small" @click="dataSum('day','sale')" style="margin-left:40px;">销售天粒度数据汇总</el-button>
            <el-button type="info" v-if="buttonPermissions.isFaceData" icon="el-icon-full-screen" :disabled="datetimeval[0]&&datetimeval[1]?false:true" size="small" @click="dataSum('day',true)" style="margin-left:40px;">人脸天粒度数据汇总</el-button>
          </el-row>
        </el-card>
      </div>
    </page>
  </el-row>
</template>
<style lang="scss">
  .page-content {
    .tag-card{
      >.el-card__body{
        >.el-row{
          margin: 20px 0;
        }
      }
    }
    padding: 15px;
    .fr {
      float: right;
    }
    .el-table {
      margin-bottom: 10px;
    }
    .paging {
      margin: 15px;
      height: 28px;
    }
    .tag-search{
      width: 40%;
      display: inline-block;
    }
    .tag-search .search-input{
      width: 300px;
      display: inline-block;
    }
    .tag-search .tag-name{
      font-size: 14px;
    }
     .datecheck {
       >span{
         font-size: 14px;
       }
      .el-input__inner {
        line-height: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 0;
        
        border-color: #e3eaf4;
        .el-input__icon {
          height: 36px;
          line-height: 36px;
          &.el-range__close-icon {
            display: none;
          }
        }
        .el-range-separator {
          height: 36px;
          line-height: 36px;
          padding: 0;
          width:6%;
        }
      }
      height: 36px;
      display: inline-block;
      .el-date-editor--date {
        .el-input__inner {
          border-radius: 0;
          border-color: #e3eaf4;
          height: 36px;
          line-height: 36px;
        }
        span,
        i {
          line-height: 36px;
        }
      }
      .timefast{         
          width: 120px;
          .el-input__inner {
            padding: 0 20px;
            font-size: 14px;
            margin-left: -6px;
          }        
      }
      .el-input--suffix {
        width: 120px;
        .el-input__inner {
          padding-right: 0;
          width: 120px;
        }
        .el-input__prefix {
          .el-input__icon {
            line-height: 36px;
            height: 36px;
          }
        }
        .el-input__suffix {
          line-height: 45px;
          vertical-align: middle;
          .el-input__suffix-inner{
            .el-icon-arrow-up.is-reverse{
              margin-top: -2px;              
              display: block;
            }
          }
        }
      }
    }
  }

</style>
<script>
  let moment = require("moment");
  import page from "@/components/page/page";
  import pageheader from "@/components/page/pageheader";
  import Cascader from "@/components/sys/assembly/elcascader";
  export default {
    data() {
      return {
        pickerOptions: {                //时间日期控件规则
          disabledDate(time) {
            return time.getTime() > Date.now()+ 60 * 60 * 1000 ;
          },
         
        },
        datetimeval:[moment(new Date()).format("YYYY-MM-DD 00:00"),moment(new Date()).format("YYYY-MM-DD HH:00")],     //日期时间
        pageTitle: "店铺数据汇总",
        companyOptions:[],//企业列表
        caseInfoOptions:[],//案场列表
        case_id:'',
        company_id_arr:[],
        company_id:'',
        org_type:1,//org类型
        buttonPermissions:{
          isSaleData:false,
          isFaceData:false,
          isFlowData:false
        },
      }
    },
    inject: ["reload"],
    components: {
      page,
      pageheader,
      Cascader,//级联选择器组件
    },
    created() {
      this.getCompanyTree();  
      if (sessionStorage.buttonPermissions) {
        this.configPermissions(JSON.parse(sessionStorage.buttonPermissions))
      }
    },
    mounted() {
      //选择所属企业change事件
      this.$Bus.$on('companyChange',data =>{
        this.org_type = 1;
        this.company_id = data[data.length-1];
        this.$Bus.$emit('Loading',true);
        this.getCaseInfo(this.company_id)//获取案场列表
      });
    },
    beforeDestroy(){
      this.$Bus.$off('companyChange')
    },
    methods: {
      //配置按钮权限，根据权限不同调整表头渲染参数
      configPermissions(val){
        let buttonPermissions = val
        let menuButtonPermissions = [];//按钮权限数组
        buttonPermissions.forEach(e =>{
          for(let key in e){
            if(key == 'menu_code'){
              menuButtonPermissions.push(e[key])
            }
          }
        });
        this.buttonPermissions.isSaleData = menuButtonPermissions.includes('isSaleData') ? true : false;
        this.buttonPermissions.isFaceData = menuButtonPermissions.includes('isFaceData') ? true : false;
        this.buttonPermissions.isFlowData = menuButtonPermissions.includes('isFlowData') ? true : false;
      },
      //获取企业树
      getCompanyTree(){
        let url = '/sys/report_assist_new/company_tree';
        this.$api.get(url)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          if(data){
            recursion(data.data);
            function recursion(val) {
              if(val.length){
                for(let i in val){
                  val[i].value = val[i].id;
                  val[i].label = val[i].company_name;
                  val[i].parent_id_str = val[i].parent_name_list ? val[i].parent_name_list.join('/') : '';
                  if(val[i].children && val[i].children.length){
                    recursion(val[i].children)
                  }else{
                    delete val[i].children
                  }
                }
              }
            }
            this.companyOptions = data.data;
            this.company_id = data.data[0].id
            this.company_id_arr.push(data.data[0].id);
            this.getCaseInfo(data.data[0].id)
          }
        })
        .catch(err=>{
          console.log(err,'企业');
          this.companyOptions = [];
        })
      },
      //获取案场列表
      getCaseInfo(id){
        let url = '/sys/report_assist_new/case_list';
        let parmas={
          org_id_list:Array.of(id),
          org_type:1
        }
        this.$api.post(url,parmas)
        .then(data => {
          if(data == '10001'){
            this.$message.error('无权操作该数据')
            this.$Bus.$emit('Loading',false);
            return
          }
          //判断接口返回正常
          if(data){
            this.caseInfoOptions = data.data;
            this.case_id="";
          }else{
            this.caseInfoOptions = [];
            this.case_id="";
          }
          this.$Bus.$emit('Loading',false)
        })
        .catch(err=>{
           console.log(err);
          this.caseInfoOptions = [];
          this.$Bus.$emit('Loading',false)
        })
      },
      //选择案场change
      changeCaseInfo(val){ 
        if(val){
            this.org_type = 2;
        }
        else{
          this.org_type = 1;
        }
      },
      //清空案场选项时
      CaseClear(){
        this.org_type = 1;
      },
      changeDate(){
        if(moment(this.datetimeval[0]).format("YYYY-MM-DD")==moment().format("YYYY-MM-DD")) {
          this.datetimeval[1]=moment().format("YYYY-MM-DD HH:mm");
        }
      },
      //点击汇总按钮
      dataSum(type,dataType='flow'){
          // this.$Bus.$emit('Loading',true);
          let url="/sys/data_summary/";
          let start_day,end_day;
          if(type=='day'){
            start_day=moment(this.datetimeval[0]).format('YYYY-MM-DD');
            end_day=moment(this.datetimeval[1]).format('YYYY-MM-DD');
          }
          else{
            start_day=moment(this.datetimeval[0]).format('YYYY-MM-DD HH');
            end_day=moment(this.datetimeval[1]).format('YYYY-MM-DD HH');
          }
          switch(dataType)
          {
            case 'flow':{
              break;
            }
            case 'sale':{
              url="/sys/data_summary/sale_";
              break;
            }
            case 'face':{
              url="/sys/data_summary/face_day";
              break;
            }
          }
          if(dataType=='face')
          {
            url+='?org_type='+this.org_type+'&foreign_key='+(this.org_type==1?this.company_id:this.case_id)+'&start_day='+start_day+'&end_day='+end_day;
          }
          else if(type=='day'){
            url+='day'+'?org_type='+this.org_type+'&foreign_key='+(this.org_type==1?this.company_id:this.case_id)+'&start_day='+start_day+'&end_day='+end_day;
          }
          else if(type=='hour')
          {
           
            url+='hour'+'?org_type='+this.org_type+'&foreign_key='+(this.org_type==1?this.company_id:this.case_id)+'&start_hour='+start_day+'&end_hour='+end_day;
          }
          this.$api.get(url)
          .then(data=>{
            if(data == '10001'){
              this.$message.error('无权操作该数据')
              this.$Bus.$emit('Loading',false);
              return
            }
            let dataname=dataType=='flow'?'客流数据':(dataType=='sale'?'销售数据':'人脸数据');
            if(data.msg=='success')
            {
              this.$message({
                showClose: true,
                message: dataname+(type=='day'?'天粒度':(type=='hour'?'时粒度':''))+'汇总成功',
                type: 'success'
              });
            }
            else{
              this.$message({
                showClose: true,
                message: dataname+(type=='day'?'天粒度':(type=='hour'?'时粒度':''))+'汇总失败',
                type: 'error'
              });
            }
            this.$Bus.$emit('Loading',false);
          })
          .catch(err=>{
             console.log(err);
            this.$Bus.$emit('Loading',false);
          })
      }
    },
    watch: {}
  }
</script>
